<template>
  <form class="dynamic-form">
    <!-- 基础字段 -->
    <div class="form-section">
      <h3>企业基本信息</h3>
      <div class="form-row">
        <label>企业名称 <span class="required">*</span></label>
        <input
          v-model="formData.name"
          @blur="validateField('name')"
          :class="{ error: errors.name }"
        />
        <div v-if="errors.name" class="error-msg">{{ errors.name }}</div>
      </div>

      <div class="form-row">
        <label>营业执照编号 <span class="required">*</span></label>
        <input
          v-model="formData.licenseNo"
          @blur="validateField('licenseNo')"
          :class="{ error: errors.licenseNo }"
        />
        <div v-if="errors.licenseNo" class="error-msg">
          {{ errors.licenseNo }}
        </div>
      </div>
    </div>

    <!-- 动态字段 -->
    <div class="form-section">
      <h3>行业专属信息</h3>
      <template v-for="field in dynamicFields" :key="field.model">
        <div class="form-row">
          <label
            >{{ field.label }}
            <span v-if="field.required" class="required">*</span></label
          >

          <input
            v-if="field.type === 'number'"
            type="number"
            v-model="formData[field.model]"
            :min="field.min"
            @input="validateField(field.model)"
            :class="{ error: errors[field.model] }"
          />

          <select
            v-else-if="field.type === 'select'"
            v-model="formData[field.model]"
            @change="validateField(field.model)"
            :class="{ error: errors[field.model] }"
          >
            <option v-for="opt in field.options" :key="opt" :value="opt">
              {{ opt }}
            </option>
          </select>

          <div v-else-if="field.type === 'checkbox'" class="checkbox-group">
            <label v-for="opt in field.options" :key="opt">
              <input
                type="checkbox"
                :value="opt"
                v-model="formData[field.model]"
                @change="validateField(field.model)"
              />
              {{ opt }}
            </label>
          </div>

          <div v-if="errors[field.model]" class="error-msg">
            {{ errors[field.model] }}
          </div>
        </div>
      </template>
    </div>
  </form>
</template>

<script setup>
import { defineProps, defineEmits, reactive, computed } from 'vue'

const props = defineProps({
  category: String,
  formData: Object
})

const emit = defineEmits(['update:formData', 'validate'])

// 验证规则配置
const validationRules = {
  name: (value) => !!value || '企业名称不能为空',
  licenseNo: (value) => /^\d{15}$/.test(value) || '请输入15位营业执照编号',
  capacity: (value) => value > 0 || '产能必须大于0',
  vehicles: (value) => value >= 1 || '至少需要1辆运输车'
}

const errors = reactive({})

// 动态字段配置
const dynamicFields = computed(() => {
  const fields = []
  switch (props.category) {
    case 'manufacture':
      fields.push(
        {
          type: 'number',
          label: '年产能（件）',
          model: 'capacity',
          min: 0,
          required: true
        },
        {
          type: 'select',
          label: '生产类型',
          model: 'productionType',
          options: ['批量生产', '定制生产', '试验生产'],
          required: true
        }
      )
      break
    case 'logistics':
      fields.push(
        {
          type: 'number',
          label: '运输车辆数',
          model: 'vehicles',
          min: 1,
          required: true
        },
        {
          type: 'checkbox',
          label: '运输类型',
          model: 'transportTypes',
          options: ['陆运', '空运', '海运']
        }
      )
      break
  }
  return fields
})

// 字段验证逻辑
const validateField = (fieldName) => {
  const validator = validationRules[fieldName]
  if (validator) {
    const isValid = validator(props.formData[fieldName])
    errors[fieldName] = typeof isValid === 'string' ? isValid : !isValid
  }
  checkFormValidity()
}

// 整体表单验证
const checkFormValidity = () => {
  const isValid = Object.values(errors).every((msg) => !msg)
  emit('validate', isValid)
}
</script>

<style scoped>
.dynamic-form {
  padding: 15px;
  background: #fff;
  border-radius: 8px;
}

.form-section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 6px;
}

.form-row {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

input,
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.error {
  border-color: #e74c3c;
}

.error-msg {
  color: #e74c3c;
  font-size: 0.85em;
  margin-top: 4px;
}

.required {
  color: #e74c3c;
}

.checkbox-group {
  display: flex;
  gap: 15px;
  padding: 8px 0;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 5px;
}
</style>
